<template>
  <div>
    <div class="mb-4">
      <el-button type="primary" @click="openForm('create')">
        <Icon icon="ep:plus"/>
        添加需求
      </el-button>
    </div>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="需求名称" align="center" prop="name"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="备注" align="center" prop="context"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ formatDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="openForm('update', scope.row.id)">
            修改
          </el-button>
          <el-button link type="primary" @click="handleDecompose(scope.row.id)"> 分解</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, watch} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {ProjectOriginalApi, ProjectOriginalVO} from '@/api/agent/original'
import {formatDate} from '@/utils/formatTime'

defineOptions({name: 'OriginalRequirementTab'})

const props = defineProps<{
  projectId: number
}>()

const emits = defineEmits(['open-form', 'decomposed'])

const loading = ref(true)
const list = ref<ProjectOriginalVO[]>([])
const total = ref(0)
const queryParams = ref<PageParam>({
  pageNo: 1,
  pageSize: 10
})

const getList = async () => {
  loading.value = true
  try {
    const res = await ProjectOriginalApi.getProjectOriginalPage({
      ...queryParams.value,
      projectId: props.projectId
    })
    list.value = res.list
    total.value = res.total
  } finally {
    loading.value = false
  }
}

const openForm = (type: string, id?: number) => {
  emits('open-form', type, id)
}

const handleDecompose = async (id: number) => {
  try {
    loading.value = true
    await ProjectOriginalApi.decomposeRequirement(id)
    ElMessage.success('分解任务已开始，请稍后在分解需求列表中查看')
    emits('decomposed')
  } finally {
    loading.value = false
  }
}

const handleDelete = async (id: number) => {
  try {
    await ElMessageBox.confirm('是否确认删除该原始需求？')
    await ProjectOriginalApi.deleteProjectOriginal(id)
    ElMessage.success('删除成功')
    await getList()
  } catch (e) {
    /* empty */
  }
}

onMounted(() => {
  if (props.projectId) {
    getList()
  }
})

watch(
  () => props.projectId,
  (newVal) => {
    if (newVal) {
      getList()
    } else {
      list.value = []
      total.value = 0
    }
  },
  {immediate: true}
)

// Expose getList for parent component to refresh
defineExpose({
  getList
})
</script>
